<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>随笔管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card shadow="hover">
      <div class="dflex-b">
        <el-button type="primary" @click="handleAdd">发布项目</el-button>
        <div class="dflex ">
          <el-input placeholder="请输入标题" clearable class="margin-right-xs" v-model="queryParams.kwd"></el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <el-table :data="list" border stripe>
        <el-table-column label="ID" prop="id" width="80" align="center"></el-table-column>
        <el-table-column label="随笔标题" prop="title"></el-table-column>
        <el-table-column label="封面图片" prop="picUrl" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.image" class="image-sm"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="边框颜色" prop="color">
          <template slot-scope="scope">
            <el-tag :color="scope.row.color" class="essay-color"></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="createTime" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
            >编辑
            </el-button>
            <!--            删除按钮-->
            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="handleDel(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { reqDelEssay, reqEssayList } from '../../api/adminApi'

const defQuery = () => {
  return {
    kwd: '',
    pageNum: 1,
    pageSize: 10
  }
}
export default {
  data() {
    return {
      queryParams: defQuery(),
      list: [],
      total: 0,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSearch() {
      this.getList()
    },
    // 获取随笔列表
    getList() {
      reqEssayList(this.queryParams).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    handleAdd() {
      this.$router.push({
        path: '/admin/essay/add',
      })
    },
    handleEdit(item) {
      this.$router.push({
        path: '/admin/essay/edit',
        query: {
          id: item.id
        }
      })
    },

    // 删除项目
    handleDel(id) {
      this.$confirm(
          '确定要删除该随笔吗',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        reqDelEssay(id).then(data => {
          this.getList()
          this.$message.success('随笔删除成功！')
        })
      })
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
  }
}
</script>

<style scoped>
.essay-color {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  border: 1px solid white;
}

.card:hover {
  cursor: pointer;
}
</style>
